<!-- 车辆详情 -->
<template>
  <div
    class="dashboard-container vehicle-detail"
  >
    <el-card
      shadow="never"
      style="width: 100%; height: calc(100vh - 205px);"
    >
      <template>
        <el-tabs
          v-model="activeName"
          class="aside-item"
          @tab-click="handleClick"
        >
          <!-- 基本信息页面 -->
          <el-tab-pane
            v-loading="loading"
            label="基本信息"
            name="first"
            class="info"
            style="height: 100%;"
          >
            <!-- 预览表单 -->
            <el-card v-if="tableIndex === 1 && infoFlag">
              <el-form
                inline
                disabled
                style="margin-left: 20px;"
                class="isDisabled"
              >
                <el-row>
                  <el-col :span="8">
                    <el-form-item
                      label="车辆编号："
                      :required="true"
                      style="margin-bottom: 0;"
                    >
                      <el-input v-model="vehicleInfo.id"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="车牌号码："
                      :required="true"
                      style="margin-bottom: 0;"
                    >
                      <el-input v-model="vehicleInfo.licensePlate"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="车型名称："
                      :required="true"
                      style="margin-bottom: 0;"
                    >
                      <el-input v-model="vehicleInfo.truckTypeName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="车辆体积："
                      :required="true"
                      style="margin-bottom: 0;"
                    >
                      <el-input v-model="vehicleInfo.allowableVolume">
                        <span
                          slot="suffix"
                          style="
                        color: #20232a;
                        font-weight: 400;
                        font-size: 14px;
                        font-family: PingFangSC, PingFangSC-Regular;
                        margin-right: 140px;
                      "
                        >m³</span>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="车辆载重："
                      :required="true"
                      style="margin-bottom: 0;"
                    >
                      <el-input v-model="vehicleInfo.allowableLoad">
                        <span
                          slot="suffix"
                          style="
                        color: #20232a;
                        font-weight: 400;
                        font-size: 14px;
                        font-family: PingFangSC, PingFangSC-Regular;
                        margin-right: 140px;
                      "
                        >吨</span>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      label="GPSID："
                      :required="true"
                      style="margin-bottom: 0;"
                    >
                      <el-input v-model="vehicleInfo.deviceGpsId"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :span="24"
                  >
                    <el-form-item
                      v-if="vehicleInfo.picture === null"
                      label="图片信息"
                      style="margin-bottom: 0;"
                      class="pic-disabled"
                    >
                      <el-image
                        style="width: 212px; height: 160px;"
                        :src="imgUrl"
                        fit="fill"
                      ></el-image>
                    </el-form-item>
                    <el-form-item
                      v-else
                      label="图片信息"
                      style="margin-bottom: 0;"
                      class="pic"
                    >
                      <el-image
                        v-for="(item, index) in vehicleInfo.picture"
                        :key="index"
                        style="width: 212px; height: 160px; margin-right: 20px;"
                        :src="item"
                        fit="fill"
                      ></el-image>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>
            <!-- 编辑表单 -->
            <el-card v-else>
              <el-form
                ref="noDisabledForm"
                class="noDisabled"
                inline
                style="margin-left: 20px;"
                :model="vehicleInfo"
                :rules="ruleInvehicleInfo"
              >
                <el-form-item
                  label="车辆编号："
                  prop="id"
                  style="margin-bottom: 20px;"
                >
                  <el-input
                    v-model="vehicleInfo.id"
                    disabled
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="车牌号码："
                  prop="licensePlate"
                  style="margin-bottom: 20px;"
                >
                  <el-input v-model="vehicleInfo.licensePlate"></el-input>
                </el-form-item>
                <el-form-item
                  label="车型名称："
                  prop="truckTypeId"
                  style="margin-bottom: 20px;"
                >
                  <el-select
                    v-model="vehicleInfo.truckTypeId"
                    placeholder="请选择车辆类型"
                    clearable
                  >
                    <el-option
                      v-for="item in carModelList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="车辆体积："
                  prop="allowableVolume"
                  style="margin-bottom: 20px;"
                >
                  <el-input v-model="vehicleInfo.allowableVolume">
                    <span
                      slot="suffix"
                      style="
                        color: #20232a;
                        font-weight: 400;
                        font-size: 14px;
                        font-family: PingFangSC, PingFangSC-Regular;
                        margin-right: 14px;
                      "
                    >m³</span>
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="车辆载重："
                  prop="allowableLoad"
                  style="margin-bottom: 20px;"
                >
                  <el-input v-model="vehicleInfo.allowableLoad">
                    <span
                      slot="suffix"
                      style="
                        color: #20232a;
                        font-weight: 400;
                        font-size: 14px;
                        font-family: PingFangSC, PingFangSC-Regular;
                        margin-right: 14px;
                      "
                    >吨</span>
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="GPSID："
                  prop="deviceGpsId"
                  style="margin-bottom: 20px; padding-left: 12px;"
                >
                  <el-input v-model="vehicleInfo.deviceGpsId"></el-input>
                </el-form-item>
                <el-form-item
                  v-if="vehicleInfo.picture === null"
                  label="图片信息"
                  style="margin-bottom: 0; display: flex;"
                  class="pic"
                >
                  <el-image
                    v-for="(item) in imgUrlInitList"
                    v-show="uploadFlag"
                    :key="item"
                    style="width: 212px; height: 160px; margin-right: 20px;"
                    :src="item"
                    fit="fill"
                  ></el-image>
                  <el-upload
                    ref="pictureUpload"
                    class="avatar-uploader"
                    action="https://slwl-api.itheima.net/manager/files/imageUpload"
                    list-type="picture-card"
                    :http-request="uploadHandle"
                    :before-upload="beforeAvatarUpload"
                    :limit="2"
                    :on-exceed="exceedsLimit"
                  >
                    <i
                      class="el-icon-plus avatar-uploader-icon"
                    ></i>
                    <div
                      slot="file"
                      slot-scope="{file}"
                    >
                      <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url"
                        alt=""
                      >
                      <span class="el-upload-list__item-actions">
                        <!-- 遮盖层预览 -->
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                        >
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <!-- 遮盖层删除 -->
                        <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="handleRemove(file, 'pictureUpload')"
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img
                      width="100%"
                      :src="dialogImageUrl"
                      alt=""
                    >
                  </el-dialog>
                </el-form-item>
                <el-form-item
                  v-else
                  label="图片信息"
                  style="margin-bottom: 0;"
                  class="pic"
                >
                  <el-upload
                    ref="pictureUploadRes"
                    class="avatar-uploader"
                    action="https://slwl-api.itheima.net/manager/files/imageUpload"
                    list-type="picture-card"
                    :http-request="uploadHandleRes"
                    :before-upload="beforeAvatarUpload"
                    :limit="2"
                    :file-list="fileList"
                    :on-exceed="exceedsLimit"
                  >
                    <i
                      class="el-icon-plus avatar-uploader-icon"
                    ></i>
                    <div
                      slot="file"
                      slot-scope="{file}"
                    >
                      <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url"
                        alt=""
                      >
                      <span class="el-upload-list__item-actions">
                        <!-- 遮盖层预览 -->
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                        >
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <!-- 遮盖层删除 -->
                        <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="handleRemove(file, 'pictureUploadRes')"
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                </el-form-item>
              </el-form>
              <p
                v-if="!infoFlag"
                class="upload-tip"
              >注：图片大小不超过5M；仅能上传 PNG JPEG JPG类型图片；建议上传400*300尺寸的图片；最多上传2张</p>
            </el-card>
          </el-tab-pane>
          <!-- 行驶证信息页面 -->
          <el-tab-pane
            label="行驶证信息"
            name="second"
          >
            <el-card
              v-if="tableIndex === 2 && drivingFlag"
              :key="1"
            >
              <!-- 预览展示form表单 -->
              <el-form
                disabled
                class="drivingForm"
                style="margin-left: 20px;"
                inline
                label-width="110px"
              >
                <el-form-item
                  label="行驶证号码:"
                  class="is-required"
                >
                  <el-input :value="drivingPreviewForm.transportCertificateNumber || '--'"></el-input>
                </el-form-item>
                <el-form-item
                  label="发动机号码:"
                  class="is-required"
                >
                  <el-input :value="drivingPreviewForm.engineNumber || '--'"></el-input>
                </el-form-item>
                <el-form-item
                  label="注册时间:"
                  class="is-required"
                >
                  <el-input :value="drivingPreviewForm.registrationDate || '--'"></el-input>
                </el-form-item>
                <el-form-item
                  label="强制报废日期:"
                  class="is-required"
                >
                  <el-input :value="drivingPreviewForm.mandatoryScrap || '--'"></el-input>
                </el-form-item>
                <el-form-item
                  label="整备质量:"
                  class="is-required"
                >
                  <el-input
                    :value="drivingPreviewForm.overallQuality"
                  >
                    <span
                      slot="suffix"
                      style="
                        color: #20232a;
                        font-weight: 400;
                        font-size: 14px;
                        font-family: PingFangSC, PingFangSC-Regular;
                        margin-right: 140px;
                      "
                    >吨</span>
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="校验有效期:"
                  class="is-required"
                >
                  <el-input :value="drivingPreviewForm.expirationDate || '--'"></el-input>
                </el-form-item>
                <el-form-item
                  label="核定载质量:"
                  class="is-required"
                >
                  <el-input
                    :value="drivingPreviewForm.allowableWeight"
                  >
                    <span
                      slot="suffix"
                      style="
                        color: #20232a;
                        font-weight: 400;
                        font-size: 14px;
                        font-family: PingFangSC, PingFangSC-Regular;
                        margin-right: 140px;
                      "
                    >吨</span>
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="有效期:"
                  class="is-required"
                >
                  <el-input :value="drivingPreviewForm.validityPeriod || '--'"></el-input>
                </el-form-item>
                <el-form-item
                  v-if="drivingPreviewForm.picture === null"
                  label="图片信息"
                  class="drivingPic"
                >
                  <el-image
                    style="width: 212px; height: 160px;"
                    :src="imgUrl"
                    fit="fill"
                  ></el-image>
                </el-form-item>
                <el-form-item
                  v-else
                  label="图片信息"
                  class="drivingPic"
                >
                  <el-image
                    v-for="(item, index) in drivingPreviewForm.picture"
                    :key="index"
                    style="width: 212px; height: 160px; margin-right: 20px;"
                    :src="item"
                    fit="fill"
                  ></el-image>
                </el-form-item>
              </el-form>
            </el-card>
            <!-- 编辑表单 -->
            <el-card
              v-else
              :key="2"
            >
              <el-form
                ref="drivingEditForm"
                class="drivingEditForm"
                inline
                style="margin-left: 20px;"
                :model="drivingEditForm"
                :rules="ruleInDrivingEdit"
                label-width="110px"
              >
                <el-form-item
                  label="行驶证号码:"
                  prop="transportCertificateNumber"
                  style="margin-bottom: 20px;"
                >
                  <el-input
                    v-model="drivingEditForm.transportCertificateNumber"
                    placeholder="请输入行驶证号码"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="发动机号码:"
                  prop="engineNumber"
                  style="margin-bottom: 20px;"
                >
                  <el-input
                    v-model="drivingEditForm.engineNumber"
                    placeholder="请输入发动机号码"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="注册时间:"
                  prop="registrationDate"
                >
                  <el-date-picker
                    v-model="drivingEditForm.registrationDate"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  label="强制报废日期:"
                  prop="mandatoryScrap"
                >
                  <el-date-picker
                    v-model="drivingEditForm.mandatoryScrap"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  label="整备质量:"
                  prop="overallQuality"
                  style="margin-bottom: 20px;"
                >
                  <el-input
                    v-model="drivingEditForm.overallQuality"
                    placeholder="请输入整备质量"
                  >
                    <span
                      slot="suffix"
                      style="
                        color: #20232a;
                        font-weight: 400;
                        font-size: 14px;
                        font-family: PingFangSC, PingFangSC-Regular;
                        margin-right: 15px;
                      "
                    >吨</span>
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="检验有效期:"
                  prop="expirationDate"
                >
                  <el-date-picker
                    v-model="drivingEditForm.expirationDate"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  label="核定载质量:"
                  prop="allowableWeight"
                  style="margin-bottom: 20px;"
                >
                  <el-input
                    v-model="drivingEditForm.allowableWeight"
                    value-format="yyyy-MM-dd"
                    placeholder="请输入发动机号码"
                  >
                    <span
                      slot="suffix"
                      style="
                        color: #20232a;
                        font-weight: 400;
                        font-size: 14px;
                        font-family: PingFangSC, PingFangSC-Regular;
                        margin-right: 15px;
                      "
                    >吨</span>
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="有效期:"
                  prop="validityPeriod"
                >
                  <el-date-picker
                    v-model="drivingEditForm.validityPeriod"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  label="图片信息"
                  class="driving-picture"
                >
                  <el-image
                    v-for="(item) in imgUrlDrivingList"
                    v-show="drivingExample"
                    :key="item"
                    style="width: 212px; height: 160px; margin-right: 20px;"
                    :src="item"
                    fit="fill"
                  ></el-image>
                  <el-upload
                    ref="drivingPictureUpload"
                    class="avatar-uploader"
                    action="https://slwl-api.itheima.net/manager/files/imageUpload"
                    list-type="picture-card"
                    :http-request="drivingUploadHandle"
                    :before-upload="beforeAvatarUpload"
                    :limit="2"
                    :file-list="drivingFileList"
                    :on-exceed="exceedsLimit"
                  >
                    <i
                      class="el-icon-plus avatar-uploader-icon"
                    ></i>
                    <div
                      slot="file"
                      slot-scope="{file}"
                    >
                      <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url"
                        alt=""
                      >
                      <span class="el-upload-list__item-actions">
                        <!-- 遮盖层预览 -->
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                        >
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <!-- 遮盖层删除 -->
                        <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="drivingHandleRemove(file)"
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                </el-form-item>
              </el-form>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-card>
    <!-- 基本信息的操作区域 -->
    <div
      v-show="tableIndex === 1"
      class="info-btn"
    >
      <div
        v-if="infoFlag"
        class="footer-btn-eidt"
      >
        <el-button @click="editVehicle">编辑</el-button>
      </div>
      <div
        v-else
        class="footer-btn"
      >
        <el-button
          class="save-btn"
          @click="submitInfoFn"
        >保存</el-button>
        <el-button
          class="cancel-btn"
          @click="cancelInfoFn"
        >取消</el-button>
      </div>
    </div>
    <!-- 行驶证的操作区域 -->
    <div
      v-show="tableIndex === 2"
      class="info-btn"
    >
      <div
        v-if="drivingFlag"
        class="footer-btn-eidt"
      >
        <el-button @click="editDriving">编辑</el-button>
      </div>
      <div
        v-else
        class="footer-btn"
      >
        <el-button
          class="save-btn"
          @click="submitDrivingFn"
        >保存</el-button>
        <el-button
          class="cancel-btn"
          @click="cancelDrivingFn"
        >取消</el-button>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img
        width="100%"
        :src="dialogImageUrl"
        alt=""
      >
    </el-dialog>
  </div>
</template>
<script>
import {
  truckTypeDetail,
  imgUpload,
  getCarTypeList,
  truckTypeUpdate,
  truckTypeDrivingLicenseDetail,
  truckTypeDrivingLicense
} from '@/api/transit'
export default {
  data() {
    return {
      activeName: 'first',
      // 基本信息数据
      vehicleInfo: {
        id: '',
        licensePlate: '',
        truckTypeName: '',
        allowableVolume: '',
        allowableLoad: '',
        deviceGpsId: '',
        picture: '',
        truckTypeId: ''
      },
      imgUrl: require('@/assets/empty-img.png'),
      tableIndex: 1,
      infoFlag: true,
      // 预览的图片Url
      imageUrl: '',
      imgUrlInitList: [require('@/assets/zhengmianzhao.png'), require('@/assets/cemianzhao.png')],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      uploadFlag: true,
      ruleInvehicleInfo: {
        id: [
          {
            required: true,
            message: '车辆编号不能为空',
            trigger: 'blur'
          }
        ],
        licensePlate: [
          {
            required: true,
            message: '车牌号码不能为空',
            trigger: 'blur'
          }
        ],
        truckTypeId: [
          {
            required: true,
            message: '车型名称不能为空',
            trigger: 'blur'
          }
        ],
        allowableVolume: [
          {
            required: true,
            message: '车辆体积不能为空',
            trigger: 'blur'
          }
        ],
        allowableLoad: [
          {
            required: true,
            message: '车辆载重不能为空',
            trigger: 'blur'
          }
        ],
        deviceGpsId: [
          {
            required: true,
            message: 'GPSID不能为空',
            trigger: 'blur'
          }
        ]
      },
      fileList: [],
      // 提交后端数据
      submitFormInfoList: {},
      // 车辆类型数据
      carModelList: [],
      picture: [],
      // 后端有返回图片时，新添加的图片
      pictureTwo: [],
      loading: true,
      // 行驶证信息相关数据
      drivingPreviewForm: {
        transportCertificateNumber: '',
        engineNumber: '',
        registrationDate: '',
        mandatoryScrap: '',
        overallQuality: '',
        expirationDate: '',
        allowableWeight: '',
        validityPeriod: '',
        picture: ''
      },
      drivingFlag: true,
      // 行驶证信息校验规则
      ruleInDrivingEdit: {
        transportCertificateNumber: [
          {
            required: true,
            message: '行驶证号码不能为空',
            trigger: 'blur'
          }
        ],
        engineNumber: [
          {
            required: true,
            message: '发动机号码不能为空',
            trigger: 'blur'
          }
        ],
        registrationDate: [
          {
            required: true,
            message: '注册时间不能为空',
            trigger: 'blur'
          }
        ],
        mandatoryScrap: [
          {
            required: true,
            message: '强制报废日期不能为空',
            trigger: 'blur'
          }
        ],
        overallQuality: [
          {
            required: true,
            message: '整备质量不能为空',
            trigger: 'blur'
          }
        ],
        expirationDate: [
          {
            required: true,
            message: '校验有效期不能为空',
            trigger: 'blur'
          }
        ],
        allowableWeight: [
          {
            required: true,
            message: '核定载质量不能为空',
            trigger: 'blur'
          }
        ],
        validityPeriod: [
          {
            required: true,
            message: '有效期不能为空',
            trigger: 'blur'
          }
        ]
      },
      drivingEditForm: {
        transportCertificateNumber: '',
        engineNumber: '',
        registrationDate: '',
        mandatoryScrap: '',
        overallQuality: '',
        expirationDate: '',
        allowableWeight: '',
        validityPeriod: '',
        picture: ''
      },
      drivingFileList: [],
      drivingExample: true,
      imgUrlDrivingList: [require('@/assets/jiazhaozhuye.png'), require('@/assets/jiazhaofuye.png')],
      drivingUploadPicture: []
    }
  },
  computed: {
    id () {
      return this.$route.query.id
    }
  },
  async created() {
    await this.getCarModelList()
    await this.getVehicleDetail()
  },
  methods: {
    handleClick(tab, event) {
      if (tab.$options.propsData.name === 'second') {
        this.getDrivingDetail()
        this.tableIndex = 2
        this.infoFlag = true
        this.drivingFlag = true
      } else if (tab.$options.propsData.name === 'first') {
        this.tableIndex = 1
        this.drivingFlag = true
        this.infoFlag = true
      }
      console.log(this.tableIndex)
    },
    // 获取车辆类型搜索项下拉数据
    async getCarModelList() {
      this.loading = true
      const res = await getCarTypeList()
      this.carModelList = res.data
      this.loading = false
    },
    // 根据id获取车辆信息
    async getVehicleDetail() {
      const res = await truckTypeDetail(this.id)
      for (const key in this.vehicleInfo) {
        this.vehicleInfo[key] = res.data[key]
      }
      if (this.vehicleInfo.picture !== null) {
        this.vehicleInfo.picture = this.getVehiclePic(res.data.picture)
        this.fileList = []
        this.vehicleInfo.picture.forEach(item => {
          this.fileList.push({
            url: item
          })
        })
      }
    },
    // 根据id获取行驶证信息
    async getDrivingDetail() {
      const res = await truckTypeDrivingLicenseDetail(this.id)
      // console.log('行驶证', res)
      for (const key in this.drivingPreviewForm) {
        this.drivingPreviewForm[key] = res.data[key]
      }

      if (this.drivingPreviewForm.picture !== null) {
        this.drivingExample = false
        this.drivingPreviewForm.picture = this.getVehiclePic(this.drivingPreviewForm.picture)
        this.drivingFileList = []
        this.drivingPreviewForm.picture.forEach(item => {
          this.drivingFileList.push({
            url: item
          })
        })
      } else {
        this.drivingExample = true
      }
      this.drivingEditForm = { ...this.drivingPreviewForm }
      // console.log(this.drivingPreviewForm)
    },
    // 对后端返回的图片进行格式转换
    getVehiclePic(imgUrl) {
      const imgArr = []
      const list = imgUrl.split(',')
      list.forEach((item) => {
        imgArr.push(item)
      })
      return imgArr
    },
    // 基本信息编辑
    editVehicle() {
      if (this.tableIndex === 1) {
        this.infoFlag = false
      }
    },
    // 行驶证信息编辑
    editDriving() {
      if (this.tableIndex === 2) {
        this.drivingFlag = false
      }
    },
    // 上传图片之前的检查
    beforeAvatarUpload(file) {
      const list = ['image/jpeg', 'image.png', '']
      const isJPG = list.includes(file.type)
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/JPEG/PNG 格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt5M
    },
    // 上传图片
    async uploadHandle(uploadFile) {
      this.uploadFlag = false
      const theFile = uploadFile.file
      const fd = new FormData()
      fd.append('file', theFile)
      const res = await imgUpload(fd)
      this.picture.push(res.data)
    },
    // 超出限制
    exceedsLimit(files, fileList) {
      this.$message.error('文件上传超出限制数量！')
    },
    // 图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 基本信息删除图片
    handleRemove(file, refFlag) {
      // 后端未返回车辆图片信息，需要显示默认图片，上传后再全部删除，则显示默认图片
      if (refFlag === 'pictureUpload') {
        // 获取上传的文件
        const uploadFiles = this.$refs.pictureUpload.uploadFiles
        // 遍历删除
        for (var i = 0; i < uploadFiles.length; i++) {
          if (uploadFiles[i]['url'] === file.url) {
            console.log('1111', file.url)
            console.log('2222', uploadFiles)
            uploadFiles.splice(i, 1)
            this.picture.splice(i, 1)
          }
          if (!uploadFiles[0]) {
            this.uploadFlag = true
          }
        }
      } else {
        const uploadFiles = this.$refs.pictureUploadRes.uploadFiles
        for (var j = 0; j < uploadFiles.length; j++) {
          if (uploadFiles[j]['url'] === file.url) {
            uploadFiles.splice(j, 1)
            this.fileList.splice(j, 1)
          }
        }
      }
    },
    // 驾驶证信息删除图片
    drivingHandleRemove(file) {
      const uploadFiles = this.$refs.drivingPictureUpload.uploadFiles
      for (var i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]['url'] === file.url) {
          uploadFiles.splice(i, 1)
          this.drivingUploadPicture.splice(i, 1)
        }
        if (!uploadFiles[0]) {
          this.drivingExample = true
        }
      }
    },
    // 后端返回有车辆信息图片，上传新图片函数
    async uploadHandleRes(uploadFile) {
      const theFile = uploadFile.file
      const fd = new FormData()
      fd.append('file', theFile)
      const res = await imgUpload(fd)
      console.log(res)
      this.fileList.push({
        url: res.data
      })
    },
    // 提交车辆信息函数
    async submitInfoFn() {
      this.submitFormInfoList = { ...this.vehicleInfo }
      if (this.vehicleInfo.picture !== null) {
        const arr = this.fileList.map(item => {
          return item.url
        })
        this.submitFormInfoList.picture = arr.join(',')
      } else {
        this.submitFormInfoList.picture = this.picture.join(',')
      }
      let carModelName = ''
      this.carModelList.forEach(item => {
        if (item.id === this.submitFormInfoList.truckTypeId) {
          carModelName = item.name
        }
      })
      this.submitFormInfoList.truckTypeName = carModelName
      this.submitFormInfoList.allowableLoad = Number(this.submitFormInfoList.allowableLoad)
      this.submitFormInfoList.allowableVolume = Number(this.submitFormInfoList.allowableVolume)
      // console.log(this.submitFormInfoList)

      const res = await truckTypeUpdate(this.id, this.submitFormInfoList)
      console.log(res)
      if (res.code !== 200) {
        this.$message.error('更新失败！')
        return
      }
      this.$message.success('保存成功！')
      this.infoFlag = true
      this.getVehicleDetail()
    },
    // 提交行驶证信息
    async submitDrivingFn() {
      if (this.drivingUploadPicture.length <= 1) {
        this.$message.error('行驶驶证必须上传两张')
        return
      }
      this.drivingEditForm.picture = this.drivingUploadPicture.join(',')
      this.drivingEditForm.allowableWeight = Number(this.drivingEditForm.allowableWeight)
      this.drivingEditForm.overallQuality = Number(this.drivingEditForm.overallQuality)
      // console.log(this.drivingEditForm)
      const res = await truckTypeDrivingLicense(this.id, this.drivingEditForm)
      console.log(res)
      if (res.code !== 200) {
        this.$message.error('更新失败！')
        return
      }
      this.$message.success('保存成功！')
      this.drivingFlag = true
      this.getDrivingDetail()
    },
    // 基本信息取消提交
    cancelInfoFn() {
      this.infoFlag = true
    },
    // 行驶证信息取消提交
    cancelDrivingFn() {
      this.drivingFlag = true
    },
    // 行驶证上传图片
    async drivingUploadHandle(uploadFile) {
      this.drivingExample = false
      const theFile = uploadFile.file
      const fd = new FormData()
      fd.append('file', theFile)
      const res = await imgUpload(fd)
      this.drivingUploadPicture.push(res.data)
    }
  }
}
</script>
<style lang="scss" scoped>
.active {
  color: #ff643d;
}
</style>

<style lang="scss" scoped>
.vehicle-detail {
  padding: 20px;

  ::v-deep .el-container{
    flex-direction: column;
    margin-left: 0px;

  }
  .in{
    height: calc(100vh - 205px);
  }
  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;

    ::v-deep .el-aside {
      padding-bottom: 14px;
      width: 100%!important;
      display: flex;
      background-color: #ffffff;
      border-bottom:1px solid #E5E7EC ;
      text-align: left;
      font-size: 14px;
      .aside-item {
        cursor: pointer;
        &:first-child {
          margin-right: 53px;
          padding-left: 25px;

        }
      }
      .aside-item.active{
        font-size: 16px;
        font-weight: bold;
        color: #20232A;
        &:after{
          content: '';
          display: block;
          background-color:#E15536 ;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
  ::v-deep .el-tabs__active-bar {
    background-color:#E15536 ;
    height: 3px;
    width: 49px;
    margin: 0 auto;
  }
  ::v-deep .el-tabs__item {
    font-size: 14px;
    color: #67717e;
  }
  ::v-deep .is-active {
    font-size: 16px;
    font-weight: bold;
    color: #20232A;
  }
  ::v-deep #tab-first {
    padding-left: 20px;
  }
  ::v-deep #tab-second {
    padding-left: 40px;
  }
 ::v-deep .info {
  .isDisabled {
    .el-input__inner {
    background-color: #fff;
    border: none;
    color: #20232a;
    height: 20px;
  }
  .pic-disabled .el-form-item__content {
    margin-top: 14px;
    margin-left: 30px;
  }
  }
  .noDisabled{
    .el-form-item {
      width: 470px;
      padding-right: 45px;
    }
    .el-input__inner {
    border-color: #E4E7ED;
    color: #20232A;
    height: 40px;
    width: 214px;
  }
  .el-upload-list__item div {
    width: 146px;
    height: 146px;
  }
  .pic {
    width: 1000px;
  }
  }
  .el-form-item__label {
    font-weight: normal;
  }
  .pic {
    display: flex;
  }
  .pic .el-form-item__content {
    display: flex;
    margin-top: 14px;
    margin-left: 30px;
  }
 }
  ::v-deep .footer-btn-eidt {
  // padding-top: 24px;
  background-color: #fff;
  height: 88px;
  line-height: 88px;
  text-align: center;
  border-top: 1px solid #E5E7ED ;
  .el-button {
    width: 110px;
    height: 40px;
    background-color: #e15536;
    color: #fff;
  }
 }
 ::v-deep .footer-btn {
  background-color: #fff;
  height: 88px;
  line-height: 88px;
  text-align: center;
  border-top: 1px solid #E5E7ED ;
  .save-btn{
    width: 110px;
    height: 40px;
    background-color: #e15536;
    border: 1px solid #e15536;
    color: #fff;
    }
  .save-btn:hover{
    background-color: #ffab98;
    border: 1px solid #ffab98;
  }
  .cancel-btn {
    width: 110px;
    height: 40px;
    color: #e15536;
    border: 1px solid #e15536;
    background-color: #ffeeeb;
  }
  .cancel-btn:hover {
    background-color: #e15536;
    color: #fff;
  }
 }
}

// 上传
::v-deep .avatar-uploader {
  .avatar-uploader-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .avatar-uploader-icon::before {
    content: "上传图片";
    margin-top: 70px;
    font-size: 14px;
    color: #000;
  }
  .avatar-uploader-icon::after {
    content: "";
    margin-top: 30px;
    position: absolute;
    display: inline-block;
    width: 50px;
    height: 50px;
    background: url('../../../src/assets/img-upload-disabled.png') 50% no-repeat;
    background-size: 20px;
  }
}
.upload-tip {
  margin-left: 120px;
  font-size: 12px;
  color: #bac0cd;
  display: inline-block;
  line-height: 17px;
  font-weight: 400;
}
::v-deep .drivingForm {
  .el-form-item {
    width: 470px;
    padding-right: 45px;
    margin-bottom: 0;
  }
  .el-form-item__label {
    font-weight: normal;
    padding-right: 0;
    text-align: left;
  }
  .el-input__inner {
    background-color: #fff;
    border: none;
    color: #20232a;
    height: 20px;
  }
  .drivingPic {
    width: 1000px;
    margin-left: 10px;
    .el-form-item__label {
      margin-right: 20px;
    }
    .el-form-item__content {
      margin-top: 10px;
      .el-image {
        border: 1px solid #d8dde3;
      }
    }
  }
}
::v-deep .drivingEditForm {
  .el-form-item {
    width: 470px;
    padding-right: 45px;
    margin-bottom: 0;
  }
  .el-form-item__label {
    font-weight: normal;
    text-align: left;
  }
  .el-input__inner {
    border-color: #E4E7ED;
    color: #20232A;
    height: 40px;
    width: 214px;
  }
  .driving-picture {
    display: flex;
    width: 1000px;
    .el-form-item__label {
      padding-left: 10px;
    }
    .el-form-item__content {
      display: flex;
      margin-top: 14px;
    }
  }
}
</style>
